<template>
    <div>
        <my-nav-bar
            fixed
            title="标签，兄弟"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
        <h2 style="margin-top: 46px;">我是标签</h2>
        <my-tag round>握草1</my-tag>
        <my-tag round type="danger">握草2</my-tag>
        <my-tag round type="primary">握草3</my-tag>
        <my-tag round type="success">握草4</my-tag>
        <my-tag mark>标1签</my-tag>
        <my-tag mark type="danger">标签2</my-tag>
        <my-tag mark type="primary">标签3</my-tag>
        <my-tag mark type="success">标签4</my-tag>
        <my-tag color="#f2826a">握草5</my-tag>
        <my-tag color="#f2826a" plain>握草6</my-tag>
        <my-tag color="#7232dd">握草7</my-tag>
        <my-tag color="#7232dd" plain>握草8</my-tag>
        <my-tag color="#ffe1e1" text-color="#ad0000">握草9</my-tag>
        <my-tag special type="danger">握草10</my-tag>
        <my-tag size="medium">握草11</my-tag>
        <my-tag size="large">握草12</my-tag>

        <my-loading :show="true" :interval="2"></my-loading>
    </div>
</template>

<script>
export default {
  data() {
    return {
      loadingSize: "20px",
      type: "default"
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },

    onClickRight() {
      console.log("right");
    },
  }
};
</script>

<style lang="less" scoped>
  .layout-content {
    width: 100%;
  }

   .col {
     line-height: 40px;
     text-align: center;
     font-size: 18px;
     color: #fff;
     &:nth-child(odd) {
       div {
         background: #267aff;
       }
     }
     &:nth-child(even) {
       div {
         background: #f56c6c;
       }
     }
   }
</style>
